import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:share_fit/app/models/home/date_type_enum.dart';

typedef SelectChanged = void Function(int index, dynamic type);

///  —————————— <br/>
/// ｜日  周  月｜<br/>
///  —————————— <br/>
/// 时间选择bar， 传入List进行渲染出上面的图<br/><br/>
/// 1、initIndex默认选中项，可选项，默认为0<br/>
/// 2、传入onDateTypeChanged Function 点击响应事件<br/>
/// 3、选中状态是动态的，需要配合Get框架的GetBuilder来使用
///
class DateTypeBar extends StatelessWidget {
  final List<DateType> dateTypes;
  final SelectChanged onSelectChanged;
  final int? initIndex;

  const DateTypeBar({
    super.key,
    this.initIndex = 0,
    required this.onSelectChanged,
    this.dateTypes = const [DateType.day, DateType.week, DateType.month],
  });

  @override
  // State<StatefulWidget> createState() => _DateTypeBarState();

  @override
  Widget build(BuildContext context) {
    TextStyle ts = Get.locale?.languageCode == 'zh'
        ? TextStyle(color: Colors.black.withOpacity(0.7), fontSize: 45.sp)
        : TextStyle(color: Colors.black.withOpacity(0.7), fontSize: 35.sp);

    // 初始化选中状态 List
    List<bool> selections = dateTypes.map((e) => false).toList();
    // 默认第一个 Tag 是选中状态
    selections[initIndex ?? 0] = true;

    return Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(
          height: 110.h,
          alignment: Alignment.center,
          padding: EdgeInsets.symmetric(horizontal: 20.w, vertical: 10.h),
          decoration: BoxDecoration(color: Colors.grey.withOpacity(0.2), borderRadius: BorderRadius.circular(20.r)),
          child: ListView.separated(
            itemCount: dateTypes.length,
            shrinkWrap: true,
            scrollDirection: Axis.horizontal,
            physics: const AlwaysScrollableScrollPhysics(),
            itemBuilder: (context, index) => TextButton(
              style: TextButton.styleFrom(
                  padding: EdgeInsets.zero,
                  // null 即 default 颜色
                  foregroundColor: selections[index] ? Colors.white : null,
                  backgroundColor: selections[index] ? Colors.white : null,
                  shape: ContinuousRectangleBorder(borderRadius: BorderRadius.circular(30.r)),
                  minimumSize: Size.fromWidth(120.w)),
              onPressed: () {
                // 简单粗暴把所有元素设为 false
                for (int i = 0; i < selections.length; i++) {
                  selections[i] = false;
                }
                // 再把自身设 true
                selections[index] = !selections[index];
                onSelectChanged(index, dateTypes[index]);
              },
              child: Text(dateTypes[index].i18nName, style: ts),
            ),
            separatorBuilder: (BuildContext context, int index) => SizedBox(width: 10.w),
          ),
        )
      ],
    );
  }
}

// class _DateTypeBarState extends State<DateTypeBar> {
//   late List<bool> _selections;
//
//   @override
//   void initState() {
//     super.initState();
//     // 初始化选中状态 List
//     _selections = widget.dateTypes.map((e) => false).toList();
//     // 默认第一个 Tag 是选中状态
//     _selections[widget.initIndex] = true;
//   }
//
//   @override
//   Widget build(BuildContext context) {
//     TextStyle ts = Get.locale?.languageCode == 'zh'
//         ? TextStyle(color: Colors.black.withOpacity(0.7), fontSize: 45.sp)
//         : TextStyle(color: Colors.black.withOpacity(0.7), fontSize: 35.sp);
//
//     return Row(
//       crossAxisAlignment: CrossAxisAlignment.center,
//       mainAxisAlignment: MainAxisAlignment.center,
//       children: [
//         Container(
//           height: 110.h,
//           alignment: Alignment.center,
//           padding: EdgeInsets.symmetric(horizontal: 20.w, vertical: 10.h),
//           decoration: BoxDecoration(color: Colors.grey.withOpacity(0.2), borderRadius: BorderRadius.circular(20.r)),
//           child: ListView.separated(
//             itemCount: widget.dateTypes.length,
//             shrinkWrap: true,
//             scrollDirection: Axis.horizontal,
//             physics: const AlwaysScrollableScrollPhysics(),
//             itemBuilder: (context, index) => TextButton(
//               style: TextButton.styleFrom(
//                   padding: EdgeInsets.zero,
//                   // null 即 default 颜色
//                   foregroundColor: _selections[index] ? Colors.white : null,
//                   backgroundColor: _selections[index] ? Colors.white : null,
//                   shape: ContinuousRectangleBorder(borderRadius: BorderRadius.circular(30.r)),
//                   minimumSize: Size.fromWidth(120.w)),
//               onPressed: () {
//                 setState(() {
//                   // 简单粗暴把所有元素设为 false
//                   for (int i = 0; i < _selections.length; i++) {
//                     _selections[i] = false;
//                   }
//                   // 再把自身设 true
//                   _selections[index] = !_selections[index];
//                 });
//                 widget.onSelectChanged(index, widget.dateTypes[index]);
//               },
//               child: Text(widget.dateTypes[index].i18nName, style: ts),
//             ),
//             separatorBuilder: (BuildContext context, int index) => SizedBox(width: 10.w),
//           ),
//         )
//       ],
//     );
//   }
// }
